import React, { Fragment } from 'react';
import { connect } from 'react-redux';
import {
  HomeWrapper,
  Header,
  HeaderText,
  BlogName,
  Slogan,
  Container,
  Content
} from './style';
import NavTop from '../../common/NavTop';
import Bottom from '../../common/Bottom';
import List from './components/List';
import RightInfo from './components/RightInfo';

const Home = (props) => {
  const { blogName, slogan } = props;
  return (
    <Fragment>
      <HomeWrapper>
        <NavTop blogName={blogName} />
        <Header>
          <HeaderText>
            <BlogName>{blogName}</BlogName>
            <Slogan>{slogan}</Slogan>
          </HeaderText>
        </Header>
        <Container>
          <Content>
            <List />
            <RightInfo />
          </Content>
        </Container>
      </HomeWrapper>
      <Bottom />
    </Fragment>
  );
}

const mapState = (state) => ({
  blogName: state.getIn(['home', 'blogName']),
  slogan: state.getIn(['home', 'slogan'])
});

export default connect(mapState, null)(Home);